<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="formTitle" width="50%">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
      <el-form-item label="名称">
        <el-input v-model="form.title" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="类型">
        <el-radio v-for="item in dict.coupon_type" :key="item.id" v-model="form.type" :label="item.value">{{ item.label }}</el-radio>
      </el-form-item>
      <el-form-item v-if="form.type == 2 || form.type == 3" label="关联商品" prop="nameList">
        <el-tag
          v-for="(goods,index) in form.nameList"
          :key="index"
          class="goodsTags"
          :closable="isAdd"
          @close="handleCloseTag(index)"
        >{{ goods }}
        </el-tag>
        <el-button v-if="isAdd" icon="el-icon-s-grid" @click="openGoods">选择商品</el-button>
      </el-form-item>

      <el-form-item label="图片(140*140)">
        <MaterialList v-model="form.image" style="width: 300px" type="image" :num="1" :width="150" :height="150" />
      </el-form-item>

      <el-form-item label="券面值">
        <el-input v-model="form.couponPrice" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="最低消费">
        <el-input v-model="form.useMinPrice" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="有效期限(天)">
        <el-input v-model="form.couponTime" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="form.status" :label="1">开启</el-radio>
        <el-radio v-model="form.status" :label="0">关闭</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>

    <choosegoods v-if="showGoods" :is-sigle="isSingle" @handleclose="cancelGoods" @confirmGoods="confirmGoods" />

  </el-dialog>
</template>

<script>
import { add, edit } from '@/api/yxStoreCoupon'
import { duplicate } from '@/utils/index'
import choosegoods from '../../components/ChooseGoods'
import picUpload from '@/components/pic-upload'
import MaterialList from '@/components/material'

export default {
  components: { choosegoods, picUpload, MaterialList },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    formTitle: {
      type: String,
      required: true
    }
  },
  dicts: ['coupon_type'],
  data() {
    return {
      loading: false, dialog: false,
      form: {
        id: '',
        type: '2',
        productIds: '',
        title: '',
        integral: 0,
        couponPrice: 0,
        useMinPrice: 0,
        couponTime: 1,
        sort: 0,
        status: 1,
        addTime: '',
        goodsNames: '',
        nameList: [],
        goodsList: [],
        isDel: 0,
        image: [],
        mark: ''
      },
      rules: {
      },
      showGoods: false,
      isSingle: true
    }
  },
  methods: {
    duplicate,
    handleCloseTag(index) {
      console.log('handleCloseTag===>', index)
      this.form.goodsList.splice(index, 1)
      // this.form.goodsList.splice(goods)
      // delete this.form.goodsList[index]
      console.log('handleCloseTag===>', this.form.goodsList)
      const nameList = this.form.goodsList.map(item => { return item.storeName })
      this.form.nameList = nameList
    },
    cancelGoods() {
      this.showGoods = false
    },
    openGoods() {
      if (this.form.type === '3') {
        this.isSingle = false
      } else {
        this.isSingle = true
      }
      this.showGoods = true
    },
    confirmGoods(goodsList = []) {
      this.showGoods = !this.showGoods
      if (goodsList && goodsList.length > 0) {
        this.form.image = []
        if (this.form.goodsList.length === 0) {
          this.form.goodsList = goodsList
        } else {
          const newList = new Set([...goodsList, ...this.form.goodsList])
          this.form.goodsList = this.duplicate(Array.from(newList), 'id')
        }
        const nameList = this.form.goodsList.map(item => { return item.storeName })
        this.form.nameList = nameList
        this.form.goodsNames = nameList.join(',')
        this.form.image.push(goodsList[0].image)
        if (!this.form.title) {
          this.form.title = goodsList[0].storeName
        }
        if (this.form.useMinPrice === 0) {
          this.form.useMinPrice = goodsList[0].price
        }
      }
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.loading = true
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    doAdd() {
      const _image = this.form.image.join(',')
      this.form.image = _image
      const _goodsIds = this.form.goodsList.map(item => { return item.id }).join(',')
      this.form.productIds = _goodsIds
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      const _image = this.form.image.join(',')
      this.form.image = _image
      const _goodsIds = this.form.goodsList.map(item => { return item.id }).join(',')
      this.form.productIds = _goodsIds
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        type: '1',
        productIds: '',
        title: '',
        integral: 0,
        couponPrice: 0,
        useMinPrice: 0,
        couponTime: 1,
        sort: 0,
        status: 1,
        addTime: '',
        goodsNames: '',
        nameList: [],
        goodsList: [],
        isDel: 0,
        image: [],
        mark: ''
      }
    }
  }
}
</script>

<style scoped>
.goodsTags{
  margin-right: 10px;
}
</style>
